<template>
  <view class="innerContain">
    <view class="top-content">
      <view class>
        <view class="date1">
          <!-- <view
            style=" font-size: 20px;font-weight: 600;margin:0 auto;color:#ffffff;line-height:43px"
          >膨胀节状态汇总表</view> -->
        </view>
      </view>
    </view>
    <view class="topradio">
      <view class="top">
        <view v-if="tableone">
          <u-loadmore :status="loadmore" :icon-type="iconType" :load-text="loadText" />
        </view>
        <view v-else>
          <table style="border-collapse: collapse;border-color: #3784f0;border:1px solid "  width="100%" cellspacing="0">
            <tr>
              <td colspan="2" class="fontsize bordercolor" style="border:1px solid  #3784f0">单位/部门</td>
              <td colspan="3" style="color:black;border:1px solid  #3784f0" class="bordercolor">{{form1.useUnit}}</td>
              <td colspan="2"  class="fontsize bordercolor"  style="border:1px solid  #3784f0">日期</td>
              <td colspan="3" style="color:black;border:1px solid  #3784f0"  class="bordercolor">{{form1.startTime+'至'+form1.endTime}}</td>
            </tr>
            <tr>
              <td colspan="2"  class="fontsize" style="border:1px solid  #3784f0">项目名称</td>
              <td colspan="3" style="color:black;border:1px solid  #3784f0">{{form1.projectName}}</td>
              <td colspan="2"  class="fontsize" style="border:1px solid  #3784f0">责任人</td>
              <td colspan="3" style="color:black;border:1px solid  #3784f0">{{form1.nickName}}</td>
            </tr>
            <tr>
              <td colspan="2"  class="fontsize" style="border:1px solid  #3784f0">异常产品数量</td>
              <td colspan="3" style="color:black;border:1px solid  #3784f0">{{form2}}</td>
              <td colspan="2"  class="fontsize" style="border:1px solid  #3784f0">产品总数量</td>
              <td colspan="3" style="color:black;border:1px solid  #3784f0">{{form1.sumNum}}</td>
            </tr>
          </table>
          <u-action-sheet :list="actionSheetList" v-model="selectShow" @click="actionSheetCallback"></u-action-sheet>
          <view @click="selectShow =true" style="border-left:1px solid  #3784f0;border-right:1px solid  #3784f0;border-bottom:1px solid  #3784f0;" class="fontsize">
            <text style="color: #1040be;font-family: 'sonti';">
              产品情况汇总({{value}})
              <u-icon style="margin-left:10rpx" name="arrow-down-fill"></u-icon>
            </text>
          </view>

          <!-- 表单 -->
          <view v-if="tabletwo">
            <u-loadmore :status="loadmore" :icon-type="iconType" :load-text="loadText" />
          </view>
          <view v-else>
            <!-- <table style="border-top: 1px solid #3784f0;" border="0" width="100%" cellspacing="0">
              <tr></tr>
            </table> -->

            <table width="100%" cellspacing="0" style="border-collapse: collapse;">
              <tr>
                <td style="padding:0;border:0px">
                  <table
                    v-for="(item,index) in form"
                    :key="index"
                    style="border-top: 0px solid;border-collapse: collapse;margin-top:-1px"
                    border="1"
                    width="100%"
                    cellspacing="0"
                  
                  >
                    <tr style="border: #3784f0 1px solid;">
                      <td colspan="6" style="padding:0;border:0px">
                        <table
                          border="1"
                          width="100%"
                          frame="void"
                          cellspacing="0"
                          cellpadding="0"
                          style="border-collapse: collapse"
                           
                        >
                         <!-- :class="item.errorData ?'fontred' :'black'" -->
                          <tr>
                            <td  style="width:10%;"  class="fontsize "  rowspan="6">{{Number(index+1)}}</td>
                            <td colspan="4" class="new fontsize">产品名称</td>
                            <td colspan="5" :style="item.errorData ? 'width:50%;color:black' :'width:50%;color:black'" >{{item.name}}</td>
                          </tr>
                          <tr>
                            <td colspan="4"  class="fontsize" >产品代码</td>
                            <td colspan="5" :style="item.errorData ? 'width:50%;color:black' :'width:50%;color:black'">{{item.code}}</td>
                          </tr>
                          <tr v-if="item.status =='正常'">
                            <td colspan="4"  class="fontsize"  style>异常位置</td>
                            <td colspan="5" :style="item.errorData ? 'width:50%;' :'width:50%;color:black'">无</td>
                          </tr>
                          <tr v-else-if="item.status =='未检查'">
                            <td colspan="4"  class="fontsize" >异常位置</td>
                            <td colspan="5" :style="item.errorData ? 'width:50%;' :'width:50%;color:black'">未检查完毕</td>
                          </tr>
                          <tr v-else-if="item.status =='已超时'">
                            <td colspan="4"  class="fontsize" >异常位置</td>
                            <td colspan="5" :style="item.errorData ? 'width:50%;' :'width:50%;color:black'">已超时</td>
                          </tr>
                          <tr v-else >
                            <td colspan="4"  class="fontsize" >异常位置</td>
                            <td colspan="5" :style="item.errorData ? 'width:50%;border:0px' :'width:50%;color:black;border:0px'">
                              <table
                                v-for="(item1,index) in item.errorData "
                                :key="index"
                                border="1"
                                width="100%"
                                frame="void"
                                cellspacing="0"
                                cellpadding="0"
                                style="border-collapse: collapse;border-width:0px; border-style:hidden;border:0px solid"
                              >
                                <tr style="border :0px solid ">
                         
                             <!-- {{item1.data}} -->
           
                  <td :class="(!item1.isDeal)&&item.status==='异常'? 'red' :''"  :style="index==item.errorData.length-1 ? '' : 'border-bottom:1px solid rgb(55, 132, 240)'">{{item1.data}}</td>
                </tr>
<!--  -->
                              </table>
                            </td>
                            <!-- <td v-if="item.errorData.length==1">d</td> -->

                            <!-- <td v-for="(item1,index) in item.errorData " :key="index">{{item1}}</td> -->
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { createTaskGather } from "@/api/index.js";
export default {
  onLoad(val) {
    this.taskId = val.data;
    plus.screen.lockOrientation("default");
  },
  onUnload() {
    plus.screen.lockOrientation("portrait-primary");
  },
  onBackPress(e) {
    if (e.from == "backbutton") {
      //  console.log(11111111111111111111111)
      uni.navigateTo({
        url: "./blank"
      });
      return true;
    }
  },
  onShow() {
    plus.screen.lockOrientation('landscape-primary');
    switch (uni.getSystemInfoSync().platform) {
      case "android":
        this.hanldeFont();
        console.log("运行Android上");
        break;
      case "ios":
        this.hanldeFont();
        console.log("运行iOS上");
        break;
      default:
        this.hanldeFonts();
        console.log("运行在开发者工具上");
        break;
    }
    this.getList();
  },
  data() {
    return {
      itemList: [
        {
          head: "赏识在于角度的转换",
          body:
            "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
          open: true,
          disabled: true
        },
        {
          head: "生活中不是缺少美，而是缺少发现美的眼睛",
          body:
            "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
          open: false
        },
        {
          head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
          body:
            "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
          open: false
        }
      ],
      form1: {},
      form2: 0,
      taskId: "",
      tableone: false,
      value: "全部",
      type: "select",
      show: false,
      border: true,
      actionSheetList: [
        {
          text: "正常"
        },
        {
          text: "异常"
        },
        {
          text: "全部"
        }
      ],
      form: [[1, 2]],
      iconType: "flower",
      show: true,
      selectShow: false,
      loadmore: "loadmore",
      tabletwo: false,
      loadText: {
        loadmore: "暂无数据",
        loading: "努力加载中",
        nomore: "没有更多数据",
        data: "暂无数据"
      },
      mode: "date"
    };
  },
  methods: {
    hanldeFont() {
      // const url = '../../static/fonts/Pacifico.ttf'
      uni.loadFontFace({
        family: "sonti", // 这里是字体的名字
        // 本地字体路径需转换为平台绝对路径
        // source: `url(${plus.io.convertLocalFileSystemURL('_www/static/fonts/Pacifico.ttf')})`,
        // #ifdef APP-PLUS

        source: `url(${plus.io.convertLocalFileSystemURL(
          "_www/static/fonts/sonti.ttf"
        )})`,
        // #endif
        // source: `url("${url}")`,
        success() {
          console.log("success");
        },
        fail(e) {
          console.log("fail");
        }
      });
    },
    hanldeFonts() {
      const url = "../../static/fonts/sonti.ttf";
      uni.loadFontFace({
        family: "sonti", // 这里是字体的名字
        // 本地字体路径需转换为平台绝对路径
        // source: `url(${plus.io.convertLocalFileSystemURL('_www/static/fonts/Pacifico.ttf')})`,
        // source: `url(${plus.io.convertLocalFileSystemURL(
        //   '_www/static/fonts/FZFSJW.ttf'
        // )})`,

        source: `url("${url}")`,
        success() {
          console.log("success");
        },
        fail(e) {
          console.log("fail");
        }
      });
    },
    getList() {
      this.tableone = false;
      this.tabletwo = false;
      this.form = [];
      this.form1 = {};
      console.log(this.value);

      createTaskGather(this.taskId).then(res => {
        if (res.data.deviceGatherVOS) {
          this.form1 = res.data;
          this.tableone = false;
          this.form = res.data.deviceGatherVOS;
          for (var i = 1; i < this.form.length; i++) {
            this.form.forEach((value, i) => {
              value.downshow = true;
            });
          }
          if (this.value == "全部") {
            if (this.form.length == 0) {
              this.tabletwo = true;
            }
            let leng = 0;
            this.form.forEach(item => {
              if (item.status == "异常") {
                leng++;
              }
            });
            console.log(leng);
            this.form2 = leng;
          } else if (this.value == "正常") {
            let _this = this;
            // console.log(this.form);
            if (this.form.length == 0) {
              this.tabletwo = true;
            } else {
              let arr = [];
              this.form.forEach(item => {
                if (item.status == "正常") {
                  arr.push(item);
                }
              });
              this.form = { ...arr };
              if (arr.length == 0) {
                this.tabletwo = true;
              }
            }
          } else if (this.value == "异常") {
            if (this.form.length == 0) {
              this.tabletwo = true;
            } else {
              let arr = [];
              this.form.forEach(item => {
                if (item.status == "异常") {
                  console.log(item);
                  arr.push(item);
                }

                console.log(arr);

                console.log(this.form);
              });
              this.form = { ...arr };

              if (arr.length == 0) {
                this.tabletwo = true;
              }
            }
          }
        } else {
          this.tableone = true;
        }
      });
    },
    selectbtn() {
      this.selectShow = true;
    },
    actionSheetCallback(index) {
      this.value = this.actionSheetList[index].text;
      this.getList();
    },
    downshow(index) {
      let obj = this.form[index];
      obj.downshow = false;
      // 深度监听
      this.$set(this.form, index, obj);
    }
    // upshow(index) {
    //   console.log(index);
    //   let obj = this.form[index]
    //   obj.downshow = false
    //   // 深度监听
    //   this.$set(this.form, index, obj );
    //   //  this.form[index].downshow = false;
    //   console.log(this.form);
    // }
  }
};
</script>

<style lang="scss" scoped>
tr,
td {
  font-family: sonti;
  // color:#1b1f27
  // color: #1d1626;
}
td {
  // word-wrap:break-word;
  word-break: break-all;
  // word-break:normal;
}
uni-view {
  font-size: 14px;
}
.vtable {
  text-align: center;
  width: 100%;
  padding: 10rpx 20rpx 20rpx 20rpx;
}
thead {
  th {
    text-align: center;
  }
}
tbody {
  td {
    text-align: center;
  }
}
.flex {
  display: flex;
  justify-content: center;
}
.text-c {
  th {
    width: 400rpx;
  }
}
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  view {
    width: 30%;
  }
  .span {
    height: 100%;
    border: 1px solid #333;
  }
  .text {
    display: flex;
    view {
      flex: 1;
    }
    uni-input {
      height: 100%;
      border-left: 1px solid;
      border-right: 1px solid;
    }
  }
}
.last {
  display: flex;
  view {
    flex: 1;
  }
}
.vtitle {
  font-weight: 600;
}
image {
  width: 50rpx;
  height: 50rpx;
}
.check {
  border-bottom: 2px solid #333;
  width: 105%;
  margin-right: 20px;
}
.red {
  color:red
}
.falseclass {
  color: red;
}
.ttitle {
  font-size: 20px;
  font-weight: 600;
}
.date {
  z-index: 9999;
  position: absolute;
  top: -80rpx;
  right: 10rpx;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  .image {
    position: absolute;
    width: 28rpx;
    height: 34rpx;
    left: 20rpx;
    // height: 80upx;
  }
  /deep/ .u-size-default {
    padding: 18rpx 24rpx 18rpx 50rpx;
  }
  /deep/ .u-mode-plain-primary {
    border: 1px solid #eee;
    box-shadow: 0 0 20rpx #eee;
    border-radius: 16rpx;
    color: #989898;
  }
}
.ttitle1 {
  position: fixed;
  bottom: 0rpx;
}
// .title2 {
//   height: calc(100% - 140upx);
// }
.k-line {
  display: lnline-block;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  margin-top: 20px;
}
@keyframes k-loadingA {
  50% {
  }
}
.innerContain {
  font-family: SimSun;
  height: 100%;
  text-align: center;
  position: relative;
  // background-color: white;
  background: rgb(244, 249, 250);
}
.top-content {
  height: 172px;
  // background: linear-gradient(to left, #1040be, #026dff);
}
.top {
  // height: calc(100% - 48px);
  margin: 0rpx;
  overflow-y: auto;
  position: absolute;
  // background-color: white;
  background: rgb(244, 249, 250);
  padding: 24px;
  width: 100%;
  // box-shadow: 4rpx 4rpx 20rpx #e5e1e1;
  // top: 43px;
  top: 10px;
  border-radius: 40rpx 40rpx 0 0;
  .card {
    // background-color: white;
    border: 1px solid #eee;
    padding: 20rpx 20rpx;
    border-radius: 25rpx;
    box-shadow: 0 0 20rpx #eee;
    margin-bottom: 20rpx;
  }
}
/deep/ .uni-view {
  font-size: 0px;
}
.titlechild {
  margin-top: -10rpx;
}
/deep/ .u-line-1 {
  height: 60rpx !important;
}
.border {
  margin-left: 20rpx;
  padding: 4rpx;
  // box-shadow: 0 0 20rpx #eee;
  border: 1px solid white;
  border-radius: 16rpx;
  color: white;
}
/deep/ .video-del {
  display: none;
}
.fontsize {
  font-weight: 800;
}
table {
  border-color: #3784f0;
  color: #1040be;
}
.fontred {
  color: red;
}
.bordercolor {
  border-color: #3784f0;
}
</style>